<default-header class="top-header"></default-header>
<div class="wrap no-sidebar">
  <div class="sidebar-left collapse navbar-collapse navbar-collapse-2">
    <navbar-utility-mobile></navbar-utility-mobile>
  </div>
  <div class="add-to-project middle">
    <!-- Middle section -->
    <div class="middle-section surface-shaded">
      <div id="scrollable-content" class="middle-container has-scroll">
        <div class="middle-content">
          <div class="container surface-shaded">
            <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
            <alerts alerts="alerts"></alerts>
            <div class="row">
              <div class="col-md-12">
                <uib-tabset class="mar-top-none">
                  <uib-tab active="selectedTab.fromCatalog">
                    <uib-tab-heading>Browse Catalog</uib-tab-heading>

                    <p ng-if="emptyCatalog && !loaded">Loading...</p>

                    <div ng-if="emptyCatalog && loaded && !nonBuilderImages.length" class="empty-state-message empty-state-full-page">
                      <h2 class="text-center">No images or templates.</h2>

                      <p class="gutter-top">
                        No images or templates are loaded for this project or the shared
                        <code>openshift</code> namespace. An image or template is
                        required to add content.
                      </p>

                      <p>
                        To add an image stream or template from a file, use the editor in the
                        <strong>Import YAML / JSON</strong> tab, or run the following command:
                        <div><code>oc create -f &lt;filename&gt; -n {{projectName}}</code></div>
                      </p>

                      <p><a href="{{projectName | projectOverviewURL}}">Back to overview</a></p>
                    </div>

                    <!-- Show an abbreviated message if only non-builders exist in the project.
                         We show a link to view the non-builder images below. -->
                    <p ng-if="emptyCatalog && loaded && nonBuilderImages.length">No builder images or templates.</p>

                    <div ng-show="!emptyCatalog">

                      <div class="row">
                        <!-- Right padding to line up cleanly with the left column tiles. -->
                        <div class="col-sm-6 catalog-header-left">
                          Choose from web frameworks, databases, and other components to
                          add content to your project.

                          <div class="filter-group">
                            <!-- Add a hidden label for screen readers. -->
                            <label for="search" class="sr-only">Filter by keyword</label>
                            <!-- Pull the filter right so the input and dropdown button
                                 can use 100% width on the same line. -->
                            <div uib-dropdown uib-keyboard-nav class="btn-group pull-right">
                              <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="menu">
                                Browse
                                <span class="caret" aria-hidden="true"></span>
                              </button>
                              <ul class="uib-dropdown-menu">
                                <li ng-repeat="tag in browseGeneral" role="menuitem">
                                  <a href="" ng-click="filter.tag = tag">{{tag}}</a>
                                </li>
                                <li class="divider"></li>
                                <li ng-repeat="tag in browseTechnologies" ng-if="tag" role="menuitem">
                                  <a href="" ng-click="filter.tag = tag">{{tag}}</a>
                                </li>
                              </ul>
                            </div>

                            <!-- Use the remaining space for the input. -->
                            <div style="overflow: hidden; padding-right: 10px;">
                              <input
                                 ng-model="filter.keyword"
                                 type="search"
                                 id="search"
                                 placeholder="Filter by keyword"
                                 class="search-input form-control"
                                 autocorrect="off"
                                 autocapitalize="off"
                                 spellcheck="false"
                                 style="width: 100%;">
                             </div>

                            <div ng-if="filter.tag">
                              Tagged with {{filter.tag}}.
                              <a href="" ng-click="filter.tag = ''">See all tags</a>
                            </div>
                          </div>
                        </div>

                        <!-- Legend -->
                        <div class="col-sm-6 catalog-legend">
                          <dl aria-hidden="true" class="text-muted">
                            <dt>
                              <i class="pficon pficon-image fa-fw"></i> Builder Image
                            </dt>
                            <dd>Builds images from source code in a Git repository.</dd>
                            <dt>
                              <i class="fa fa-clone fa-fw"></i> Template
                            </dt>
                            <dd>Creates a predefined set of resources.</dd>
                            <dt>
                              <i class="fa fa-bolt fa-fw"></i> Quickstart
                            </dt>
                            <dd>Provides a skeleton for developing an application.</dd>
                          </dl>
                        </div>
                      </div>

                      <div ng-if="filteredCategoryTags.length === 0 && !emptyCatalog && loaded" style="margin-top: 5px;">
                        All builder images and templates are hidden by the current filter.
                        <a href="" ng-click="filter.keyword = ''; filter.tag = ''">Clear filter</a>
                      </div>

                      <div class="row gutter-top">
                        <!-- left column -->
                        <div class="col-md-6 catalog-col catalog-col-1">
                          <div ng-repeat="category in leftCategories">
                            <catalog-category
                              category-label="{{categoryLabels[category] || tag}}"
                              builders="filteredBuildersByCategory[category]"
                              templates="filteredTemplatesByCategory[category]"
                              project="{{projectName}}"
                              item-limit="{{itemLimit}}"
                              filter-tag="filterTag">
                            </catalog-category>
                          </div>
                        </div>
                        <!-- right column -->
                        <div class="col-md-6 catalog-col catalog-col-2">
                          <div ng-repeat="category in rightCategories">
                            <catalog-category
                              category-label="{{categoryLabels[category] || tag}}"
                              builders="filteredBuildersByCategory[category]"
                              templates="filteredTemplatesByCategory[category]"
                              project="{{projectName}}"
                              item-limit="{{itemLimit}}"
                              filter-tag="filterTag">
                            </catalog-category>
                          </div>
                        </div>
                      </div>

                      <!-- Don't show images without the builder tag by default, by allow the user to pick one. -->
                      <div ng-if="filteredNonBuilders.length" click-to-reveal link-text="Don't see the image you are looking for?" class="gutter-bottom">
                        <h2>Additional Images</h2>
                        <div class="gutter-bottom">
                          <span class="pficon pficon-warning-triangle-o"></span>
                          Some images in this list may not be able to build source. Use with caution.
                        </div>
                        <div class="catalog catalog-fluid">
                          <catalog-image
                              image-stream="image.imageStream"
                              image-tag="image.imageStreamTag"
                              project="{{projectName}}"
                              version="image.version"
                              referenced-by="image.referencedBy"
                              ng-repeat="image in filteredNonBuilders | orderBy : ['name', 'imageStream.metadata.namespace']">
                          </catalog-image>

                          <!-- Add an empty item to keep the last tile from stretching to 100% width. -->
                          <div style="height: 0;" class="tile-image"></div>
                        </div>
                      </div>
                    </div>
                  </uib-tab>

                  <uib-tab active="selectedTab.fromDockerImage">
                    <uib-tab-heading>Deploy Image</uib-tab-heading>
                    <deploy-image project="projectName" context="context" alerts="alerts"></deploy-image>
                  </uib-tab>

                  <uib-tab active="selectedTab.fromFile">
                    <uib-tab-heading>Import YAML / JSON</uib-tab-heading>
                    <from-file></from-file>
                  </uib-tab>

                </uib-tabset>
              </div>
            </div>
          </div>
        </div><!-- /middle-content -->
      </div><!-- /middle-container -->
    </div><!-- /middle-section -->
  </div><!-- /middle -->
</div><!-- /wrap -->
